<!--  -->
<template lang='html'>
 <div id='login'>
  <div class="back">
    <div class="cen">
      <div class="cen_left">
        <img src="../../../static/login-img/2.png">
      </div>
      <div class="cen_right">
          <div class="user">
            <h2>易书管理员登录</h2>
            <span>专门为学生打造的校园二手书交易平台</span>
          </div>
          <div class="wrod" >
            <div >账 户 <input type="text"  placeholder="请用户名/手机号登录" v-model="user"></input></div>
            <div>密 码 <input type="password"  placeholder="请输入密码密码"  v-model="pwd"></input></div>
          </div>
        
           <button @click="login()">登录</button>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
import axios from 'axios'
export default {
  name: "login",
  data() {
    return {
      flag: false,
      user: "",
      pwd: "",
    };
  },
  methods: {
    login() {
      let obj = {
        username: this.user,
        password: this.pwd,
      };
    
      axios.post("/apis/admininfo",obj).then((res) => {
        sessionStorage.setItem('user',JSON.stringify(obj.username))
        if(res.data.code === "01"){
         let Data = res.data.data
         if (obj.username === "123" && obj.password === "123"){
         
              this.$router.replace('/student')
          }else if(obj.username=== "" ||  obj.password=== ""){
                alert("账号或者密码不能为空")
          }else{
            alert("账号或密码错误")
          }
        }  
      });
    },
  },
};

</script>
<style lang='css' scoped>
#login {
  width: 100%;
  height: 936px;
  background: url("../../../static/login-img/1.png");
  background-repeat: no-repeat;
  background-position: "center center";
}
.back {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.back .cen {
  width: 800px;
  height: 495px;
  background: #fff;
  border-radius: 14px;
  display: flex;
}
.cen img {
  width: 300px;
  margin: 200px 20px 10px 30px;
}
.cen_right {
  width: 310px;
  /* background: red; */
  display: flex;
  flex-direction: column;
}
.cen_right button {
  margin-left: 30px;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  font-size: 18px;
  color: #fff;
  background: #5693ff;
  border: none;
  border-radius: 4px;
  outline: none;
}
.cen_right .user {
  margin-left: 30px;
  margin-top: 60px;
  margin-bottom: 30px;
}
.cen_right .user h2 {
  font-weight: 600;
  font-size: 30px;
}
.cen_right .user span {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
}
.cen_right .goback {
  margin-left: 30px;
  width: 280px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #5693ff;
}
.wrod {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
}
.wrod input {
  width: 200px;
  height: 40px;
  text-indent: 10px;
  margin-left: 10px;
  outline: none;
  border: none;
  font-size: 18px;
}
.wrod div {
  width: 310px;
  height: 50px;
  margin-bottom: 30px;
  font-size: 18px;
  border-bottom: 1px solid #5693ff;
}
.go {
  font-size: 14px;
  padding: 3px;
  border: 1px solid #5693ff;
  border-radius: 4px;
  color: #5693ff;
}
</style>
